<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>fh字帖生成</title>
        <link rel="icon" href="./files/fh-ico.ico">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
        <style>
            /* 全局 */
            *{margin:0px;padding: 0px;user-select: none;-ms-overflow-style: none;scrollbar-width: none;}
            @font-face {font-family: 'fh'; src:url("./files/fh-242.otf");}
            @media print {@page{margin: 0;padding: 0;}}
            :root{--border-bold: 0.1mm solid;--border-thin: 0.03mm solid;}
            ::-webkit-scrollbar {display: none;}
            /* 纸张 */
            .paper{
                margin:auto;
                height: 297mm;
                width: 210mm;
                border:0.1mm black solid;
                overflow-x: hidden;
            }
            /* 用户选择并输入区域 */
            .input{
                margin-top:3mm;
                display:flex;
                align-items:center;
                justify-content: space-evenly;
            }
            .input *{
                font-size:5mm;
                vertical-align: middle;
                text-align: center;
            }
            /* 字帖字体 */
            .ctx{
                min-width:100%;
                float:left;
                margin-top: 1.1mm;
                font-family:'fh';
                font-size: 9.4mm;
                color:#3b363677;
                display:flex;
                white-space:nowrap;
            }
            /* 字帖基线 */
            .line{
                height:2.15mm;
                border-bottom: var(--border-thin) #3b363677;
            }
            .lines              {margin-top: 4mm;}
            .lines:first-child  {margin-top: 9mm;}
            .ctx + .line        {border-top: var(--border-bold) black;}
            .line:last-child    {border-bottom:var(--border-bold) black;}
            /* 临摹模式选择性出现 */
            .ctx:not(.show){display:none;}
        </style>
    </head>
    <body>
    
        <div class="paper">

            <div class="input">

                <div class="inputType">
                    <input type="checkbox" name='inputType' id='inputType'>
                    <label for='inputType' id="toggleInputType">&ensp;临摹模式已关</label>
                </div>  <!--inputType-->

                <select title="none">
                    <option value='0' disabled selected>::选择字帖模式::</option>
                    <option value='1'>顺序生成字符</option>
                    <option value='2'>自定义输入字符</option>
                    <option value='3'>语句模式</option>
                </select>

                <input type="text" placeholder="左侧选择字帖模式" id='inputText'>
                <button type="button" onclick="window.print()">打印</button>

            </div>  <!--input-->

        </div>  <!--paper-->

        <script>
            
            let paper = document.querySelector('.paper');
            let inputType = document.getElementById('inputType');
            let select = document.querySelector('select');
            let inputText = document.querySelector('#inputText');
            
            /* 添加横线 */
            for (let i = 0; i < 10; i++) {
                let lines = document.createElement('div');
                lines.classList.add('lines');
                let ctx = document.createElement('div');
                ctx.classList.add('ctx','show');
                lines.appendChild(ctx);
                ctx.setAttribute('contenteditable','')
                for (let j = 0; j < 10; j++) {
                    let line = document.createElement('div');
                    line.classList.add('line');
                    lines.appendChild(line);
                }
                paper.appendChild(lines);
            }

            /* 字帖输入模式选择 */
            select.addEventListener('change',()=>{
                if(select.value === '1')
                    inputText.setAttribute('maxlength', 1);
                else inputText.setAttribute('maxlength', '');
                input();
            })

            /* 临摹模式选择 */
            inputType.addEventListener('change',(i)=>{
                let kg = document.querySelector('#toggleInputType');
                kg.innerHTML = i.target.checked ?'&ensp;临摹模式已开':'&ensp;临摹模式已关' ;
                document.querySelectorAll('.lines:nth-of-type(2n-1) .ctx').forEach((i)=>{
                    i.classList.toggle('show');
                })
                input();
            })

            /* 输入框监听，利用selectInput函数判断字帖输入模式 */
            function input(){
                inputText.addEventListener('input',(e)=>{
                    if(document.querySelector('.ctx').offsetWidth > paper.offsetWidth){
                        inputText.setAttribute('maxlength', '0')
                    }else{
                        inputText.setAttribute('maxlength', '20')
                    }
                    selectInput(e.target);
                })
                selectInput(inputText);
            }

            /* 将输入框文字添加到字帖中 */
            function addText(inner){
                document.querySelectorAll('.ctx').innerHTML = ''
                inner.forEach((i,index)=>{i === undefined ? inner[index] = '' : '' ;})
                document.querySelectorAll('.show').forEach((i, ind)=>{
                    i.innerHTML = `${('<span>' + inner[ind]+ '</span>').repeat(9)}`;
                    i.style.justifyContent = 'space-around';
                })
            }

            /* 判断字帖输入模式进行不同处理 */
            function selectInput(e){
                let inner;
                switch (select.value){
                    case '1':
                        inputText.setAttribute('placeholder', '请输入一个字符');
                        inputText.setAttribute('maxlength', 1);
                        let start = e.value.charCodeAt();
                        inner = [];
                        for(let i = 0; i < 10; i ++){
                            inner.push(String.fromCharCode((start+i)));
                        }
                        addText(inner);break;
                    case '2':
                        inputText.setAttribute('placeholder', '请输入一堆字符')
                        inner = e.value.split('');
                        let l = inner.length;
                        for(let i = 0; i < 10 - l; i ++){
                            inner.push(inner[i]);
                        }
                        addText(inner);break;
                    case '3':
                        inputText.setAttribute('placeholder', '请随意输入')
                        inner = e.value;
                        document.querySelectorAll('.ctx').forEach(i=>{
                            i.style.justifyContent = 'flex-start';
                            i.innerHTML = ('&ensp;' + inner);
                        });break;
                    case "0": 
                        document.querySelector('.ctx:nth-of-type(1)').innerHTML = '请选择字帖模式';
                        break;
                    default:alert(`Error: Invalid value(${select.value})`)
                }
            }

            /* 初始提示 */
            inputText.addEventListener('focus',()=>{
                if(select.value === '0') document.querySelector('.ctx:nth-of-type(1)').innerHTML='请选择字帖模式'
            })
        </script>
    </body>
</html>